<template>
  <div class="date">
    <div :class="['date-tag', 'active' + current]">
      <em @click="chooseItem('1')">实时数据</em>
      <em @click="chooseItem('2')">近1小时</em>
      <em @click="chooseItem('3')">近12小时</em>
      <em @click="chooseItem('4')">近1天</em>
    </div>
    <div class="range-time">
      <a-range-picker
        ref="date"
        class="hide-time"
        :disabled-date="disabledDate"
        :show-time="{ format: 'HH:mm:ss' }"
        format="YYYY-MM-DD HH:mm:ss"
        @ok="onOk"
      >
        <div :class="['time-picker', startTime || endTime ? 'active' : '']">
          <em v-if="!startTime || !endTime">开始时间~结束时间</em>
          <em v-else>
            <a-tooltip placement="topLeft">
              <template slot="title">{{startTime + '~' + endTime}}</template>
              {{ startTime}}~{{ endTime}}
            </a-tooltip>
          </em>
        </div>
      </a-range-picker>
    </div>
  </div>
</template>
<script>
  import moment from 'moment'
  import 'moment/locale/zh-cn'

  export default {
  data() {
    return {
      current: 1,
      startTime: '', //开始时间
      endTime: '', //结束时间
    }
  },
  methods: {
    disabledDate(current) {
      // Can not select days before today and today
      return current && current >= moment().endOf('day')
    },
    //选择快捷日期
    chooseItem(current) {
      this.current = current
      this.startTime = ''
      this.endTime = ''
      this.$emit('chooseType', {
        type: current,
      })
    },
    formateTime(momnet) {
      return moment(momnet).format('YYYY-MM-DD HH:mm:ss')
    },
    onOk(val) {
      const times = [this.formateTime(val[0]), this.formateTime(val[1])]
      this.startTime = times[0]
      this.endTime = times[1]
      this.current = 5
      this.$emit('chooseType', {
        type: 5,
        startTime: times[0],
        endTime: times[1],
      })
    },
  },
}
</script>
<style lang="less" scoped>
.date {
  padding: 20px 12px 9px;
  display: flex;
  .date-tag {
    display: flex;
    align-items: center;
    justify-content: space-between;
    em {
      cursor: pointer;
      width: 66px;
      height: 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.65);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
    }
  }
  .active1 {
    em {
      border-top: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
      border-right: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:first-child {
      color: #fff;
      border: 2px solid rgba(2, 224, 247, 1);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }
  .active2 {
    em {
      border-top: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
      border-right: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:first-child {
      border-left: 1px solid rgba(2, 224, 247, 0.5);
      border-right: none;
    }
    em:nth-child(2) {
      color: #fff;
      border: 2px solid rgba(2, 224, 247, 1);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }
  .active3 {
    em {
      border-top: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
      border-left: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:last-child {
      border-left: none;
      border-right: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:nth-child(3) {
      color: #fff;
      border: 2px solid rgba(2, 224, 247, 1);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }
  .active4 {
    em {
      border-top: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
      border-left: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:nth-child(4) {
      color: #fff;
      border: 2px solid rgba(2, 224, 247, 1);
      font-family: PingFangSC-Medium, PingFang SC;
    }
  }
  .active5 {
    em {
      border-top: 1px solid rgba(2, 224, 247, 0.5);
      border-bottom: 1px solid rgba(2, 224, 247, 0.5);
      border-left: 1px solid rgba(2, 224, 247, 0.5);
    }
    em:nth-child(4) {
      border-right: 1px solid rgba(2, 224, 247, 0.5);
    }
  }
  .range-time {
    margin-left: 4px;
    flex: 1;
    height: 22px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(2, 224, 247, 0.5);
    .time-picker {
      width: 100%;
      height: 20px;
      color: rgba(255, 255, 255, 0.65);
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      padding: 0 6px;
      position: relative;
      z-index: 1;
      em {
        width: 90%;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        box-sizing: border-box;
      }
    }
    .active {
      color: #fff;
    }
    .hide-time {
      width: 100% !important;
      height: 22px;
    }
  }
}
</style>